<template>
    <div class="popUp">
        <div class="zero_ask" ref="ask_body">
        <div class="black_cover" @click="hideAsk()"></div>
        <div class="content" ref="ask_cnt">
            <div class="ask_teacher">
<!--                 <h3 class="form_title" >{{titles[0]}}</h3>
                <p class="form_info" >{{titles[1]}}</p> -->
                <slot></slot>
                <!-- <form action="" method=""> -->
                    <!-- 姓名 -->
                    <p>
                        <input type="text" placeholder="姓名" v-model="name" ref="name" @blur="checkName()">
                    </p>
                    <span class="tips" ref="tips1">名字格式不对或为空!请输入中文名字。</span>
                    <!-- 手机号 -->
                    <p>
                        <input type="number" placeholder="手机号" v-model="tel" ref="tel" @blur="checkTel()">
                    </p>
                    <span class="tips" ref="tips2">手机号不正确或为空!请输入正确手机号。</span>
                    <!-- 年级 -->
                    <div class="form_select clearfix">
                        <div class="fl" @click="showGrade">{{grade_arr[val]}}<span></span></div>
                        <div class="fr" @click="showSub">{{subject_high[ind]}}<span></span></div>
                    </div>
                    <button @click="submit">马上领取</button>
                <!-- </form> -->
            </div>
        </div>
    <div class="sel_cover"  v-if="selC">
      <div class="select_wrap" v-if="isSeen">
        <p @click="getVal(1)">小学</p>
        <p @click="getVal(2)">初中</p>
        <p @click="getVal(3)">高中</p>
        <p @click="getVal(4)">其他</p>
      </div>
      <div class="select_wrap" v-if="isSub">
        <p @click="setSub(1)">课业辅导</p>
        <p @click="setSub(2)">语文</p>
        <p @click="setSub(3)">数学</p>
        <p @click="setSub(4)">英语</p>
        <div v-if="isHigh">
          <p @click="setSub(5)">物理</p>
          <p @click="setSub(6)">化学</p>
          <p @click="setSub(7)">文综</p>
          <p @click="setSub(8)">其他</p>
        </div>
      </div>
    </div>

    </div>
    </div>
</template>

<script>
    export default {
        props: {
            // titles: {
            //     type: Array,
            //     default: []
            // }
        },
        data() {
            return {
              selC: false,
              isSeen: false,
              isSub: false,
              isHigh: false,
                name: '',
                tel: '',
                val: 0,
                ind: 0,
                sub: '科目',
                grade_arr: ['年级','小学','初中','高中','其他'],
                subject_pri: ['语文','数学','英语','其他'],
                subject_high: ['科目','课业辅导','语文','数学','英语','物理','化学','文综','其他'],
                custom: ''
            }
        },
        created(){
          this.custom = this.getCookie('custom');
        },
        methods: {
            //获取cookie
            getCookie: function(cname) {
              var name = cname + "=";
              var ca = document.cookie.split(';');
              for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1);
                if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
              }
              return "";
            },
            getVal(val) {
              this.val = val;
              this.ind = 0;
              this.selC = false;
              this.isSeen = false;
            },
            showGrade(){
              this.selC = true;
              this.isSeen = true;
            },
            setSub(val) {
              this.ind = val;
              this.selC = false;
              this.isSub = false;
            },
            showSub(){
              if(this.val == 0){
                alert('请先选择年级')
              }else if(this.val != 1){
                this.isHigh = true;
                this.isSub = true;
                this.selC = true;
              }else {
                this.isHigh = false;
                this.isSub = true;
                this.selC = true;
              }

            },
            checkName() {
                var name = this.name;
                if (!(/^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/.test(name))) {
                    this.$refs.tips1.style.visibility = 'visible'
                } else {
                    this.$refs.tips1.style.visibility = 'hidden'
                }
            },
            checkTel() {
                var tel = this.tel;
                if (!(/^[1][3,4,5,7,8][0-9]{9}$/.test(tel))) {
                    this.$refs.tips2.style.visibility = 'visible'
                } else {
                    this.$refs.tips2.style.visibility = 'hidden'
                }
            },
            showAsk() {
                var self = this;
                this.$refs.ask_body.style.display = "block"
                setTimeout(function() {
                    self.$refs.ask_cnt.style.bottom = "0";
                }, 200)
            },
            hideAsk() {
                var self = this;
                this.$refs.ask_cnt.style.bottom = "-80%";
                setTimeout(function() {
                    self.$refs.ask_body.style.display = "none"
                }, 200)
            },
            submit(){
              console.log(this.tel,this.name)
              if( this.tel == '' || this.name == ''){
                alert('姓名或手机号不能为空')
                return false;
              }
              this.$axios({
                url: 'http://api.web.delijiajiao.com/marketing/consulation/submit',
                method: 'post',
                data: {
                  name: this.name,
                  phone: this.tel,
                  grade: this.val,
                  subject: this.ind,
                  custom: this.custom
                }
              }).then(function(data) {
                alert(data.data.msg)
              })
            }
        }
    }
</script>

<style>
.sel_cover {
  position: absolute;
  z-index: 102;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8)
}
.zero_ask {
    position: fixed;
    z-index: 10;
    bottom: 0;
    width: 100%;
    display: none;
    height: 100%;
    z-index: 300000;
}
.black_cover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
}
.zero_ask .content {
    position: absolute;
    bottom: -80%;
    /*bottom: 0%;*/
    width: 100%;
    box-sizing: border-box;
    padding: .5rem;
    transition: .3s;
    background: #fff;
}
.tips {
    display: block;
    margin-bottom: .1rem;
    color: #f54545;
    visibility: hidden;
    font-size: .24rem;
}
.zero_ask .form_title {
    font-weight: normal;
    font-size: .54rem;
    color: #333;
}
.zero_ask .form_info {
    font-size: .28rem;
    color: #888;
    margin: .2rem 0 .5rem;
}
input,select,option,button {
    outline: none;
    border: none;
}
.zero_ask input {
    text-align: center;
    width: 100%;
    height: .8rem;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #eee;
}
.zero_ask input:focus {
    background-color: #fff;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.form_select {
    justify-content: space-between;
    text-align: center;
}
.form_select>div {
  position: relative;
    width: 40%;
    border: 1px solid #eee;
    height: .8rem;
    border-radius: .1rem;
    color: #666;
    font-size: .32rem;
    line-height: .8rem;
}
.form_select>div span {
  position: absolute;
  right: .2rem;
  display: inline-block;
  width: 0;
  top: 50%;
  margin-top: -3px;
  border-width: 10px 6px 10px 6px ;
  border-color: #999 transparent transparent transparent;
  border-style: solid;
}
.zero_ask button {
    width: 100%;
    height: .8rem;
    margin-top: .4rem;
    color: #fff;
    background: #fcc803;
    border-radius: 5px;
}
.select_wrap {
  position: absolute;
  top: 35%;
  left: 50%;
  margin-left: -2rem;
  width: 4rem;
  z-index: 100;
  background: #fff;
  border: 1px solid #fcc803;
  border-radius: 10px;
  font-size: .4rem;
  padding: .2rem 0;
}
.select_wrap p {
  border-bottom: 1px solid #eee;
  padding: .15rem 0;
}
.select_wrap p:last-child {
  border-bottom: none;
}
</style>
